<script setup>
import { reactive,watch,defineProps ,ref} from 'vue'
import {useRouter} from 'vue-router'
import useListStore from '@/store/list.js'
import { storeToRefs} from 'pinia'
import AuditDialog from '@/components/dialog/AuditDialog.vue'

const prop = defineProps(['searchData'])

const router = useRouter()

// onMounted(()=>{
//   listStore.filteData(prop.searchData)
//   handleCurrentChange(1)
// })

// 表格
let tableData = reactive([])
let nums = ref(0)

// 页面跳转
const toAudit = (row) => {
  router.push({name:`audit`,query:{id:row.id,username:row.username}})
}

// 删除记录
let curId = ref(0)
const deleteRow = (id) => {
  curId.value = id
  dialogData.isShow=true
}

const close = (f) => { 
  dialogData.isShow=false
  if(f === '确定'){
    listStore.removeUser(curId.value)
  }
}

const dialogData = reactive({
  title:'提示',
  isShow:false,
  buttons:[
    {text:'取消',type:'danger',clickEvent:close},
    {text:'确定',type:'primary',clickEvent:close}
  ]
})

const listStore = useListStore()
const {userList} = storeToRefs(listStore) //保证数据响应式
// 分页器
const pageData = reactive({
  currentPage:1,
  pageSize:10,
  total:nums.value,
})

// 页码发生改变
const handleCurrentChange = (val) => {
  let start = (val - 1) * pageData.pageSize
  let end = val * pageData.pageSize 
  let res = listStore.filteDatas
  nums.value = res.length
  tableData = res.slice(start,end) 
}
// 监测数据改变:初始化数据在这里
watch(() => userList.value,()=>{
  listStore.filteData(prop.searchData)
  handleCurrentChange(1)
},{deep:true})

// 监测搜索数据更新
watch(() => prop.searchData,(newValue) => {
  listStore.filteData(newValue)
  let res = listStore.filteDatas
  tableData = res.slice(0,10)
  nums.value = res.length
},{deep:true})



</script>

<template>
  <div>
    <el-table :data="tableData" border height="62vh" style="width: 100%;font-size: 15px;" size="default">
    <el-table-column prop="username" label="用户名" width="100" />
    <el-table-column prop="product" label="产品线" width="100" />
    <el-table-column prop="industry" label="行业" width="100" />
    <el-table-column prop="startDate" label="开始时间" />
    <el-table-column prop="endDate" label="结束时间" />
    <el-table-column fixed="right" label="操作" width="150">
      <template #default="scope">
        <el-button style="font-size: 15px;" link type="primary"  @click.prevent="toAudit(scope.row)">
          审核
        </el-button>
        <el-button style="font-size: 15px;" link type="primary"  @click.prevent="deleteRow(scope.row.id)">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="pagination"> 
    <span>共{{ nums }}项数据</span>
    <el-pagination
      v-model:current-page="pageData.currentPage"
      :page-size="pageData.pageSize"
      :background="true"
      layout=" prev, pager, next"
      :total="nums"
      @current-change="handleCurrentChange"
    />
  </div>
  <AuditDialog @close="close" :title="dialogData.title" :buttons="dialogData.buttons" :isShow="dialogData.isShow">
    <div style="text-align: center;font-size: 15px;">
      确定删除吗？
    </div>
  </AuditDialog>
  </div>
</template>

<style lang="less" scoped>
.pagination{
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  border: 1px solid gainsboro;
  border-top: none;
  padding: 10px;
  &:deep(.el-pagination){
    --el-pagination-font-size:15px;
  }
}

</style>